<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 16px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 16px;
  }

  .dialog-form>div {
    margin-bottom: 8px;
  }

  .error-table {
    border: 1px solid #f56c6c;
  }

  .show-error {
    display: block;
    width: 100%;
    color: #f56c6c;
    margin-left: 16px;
  }

</style>
<style>
  .flex-form .upload-file.full {
    width: 100%;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="(readonly?'read-only-form':'') + ' finance-class flex-form'">
      <div class="title">生产设备
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="formShow = true;resetForm('ruleForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="productList" border style="margin: 0 16px" :class="{'error-table' : isError}">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteProduct(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="主要生产设备名称" prop="equimentName"></el-table-column>
        <el-table-column label="规格" prop="spec"></el-table-column>
        <el-table-column label="数量" prop="count"></el-table-column>
        <el-table-column label="产地" prop="origin"></el-table-column>
        <el-table-column label="购买时间" prop="buyDate"></el-table-column>
        <el-table-column label="生产哪类产品" prop="useTarget"></el-table-column>
        <el-table-column label="产能(日)" prop="capacitydaily"></el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
      </el-table>
      <div v-if="isError" style="margin-top:16px; margin-bottom:0" :class="{'show-error': isError}">请添加生产检测设备</div>
      <div class="line"></div>
      <div class="title">检测设备
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="patentShow = true;resetForm('patentForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="patentList" border style="margin: 0 16px 16px 16px" :class="{'error-table' : isError2}">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deletePatent(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="设备（仪器）名称" prop="equimentName"></el-table-column>
        <el-table-column label="规格" prop="spec"></el-table-column>
        <el-table-column label="数量" prop="count"></el-table-column>
        <el-table-column label="产地" prop="origin"></el-table-column>
        <el-table-column label="购买时间" prop="buyDate"></el-table-column>
        <el-table-column label="检测项目" prop="useTarget"></el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
      </el-table>
      <div v-if="isError2" style="margin-bottom:16px" :class="{'show-error': isError2}">请添加检测设备</div>

      <!--添加产品-->
      <dialog-ext title="新增" v-model="formShow" @submitForm="submitForm" @resetDialog="resetForm('ruleForm')" width="800px">
        <el-form :model="form" ref="ruleForm" label-width="140px" class="dialog-form">
          <el-form-item label="主要生产设备名称" prop="equimentName">
            <el-input v-model="form.equimentName"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="spec">
            <el-input v-model="form.spec"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="count">
            <el-input v-model="form.count"></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="origin">
            <el-input v-model="form.origin"></el-input>
          </el-form-item>
          <el-form-item label="购买时间" prop="buyDate">
            <el-date-picker type="date" v-model="form.buyDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="生产哪类产品" prop="useTarget">
            <el-input v-model="form.useTarget"></el-input>
          </el-form-item>
          <el-form-item label="产能(日)" prop="capacitydaily">
            <el-input v-model="form.capacitydaily"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-form>
      </dialog-ext>

      <!--添加专利-->
      <dialog-ext title="新增" v-model="patentShow" @submitForm="submitPatent" @resetDialog="resetForm('patentForm')" width="800px">
        <el-form :model="patent" ref="patentForm" label-width="140px" class="dialog-form">
          <el-form-item label="设备（仪器）名称" prop="equimentName">
            <el-input v-model="patent.equimentName"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="spec">
            <el-input v-model="patent.spec"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="count">
            <el-input v-model="patent.count"></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="origin">
            <el-input v-model="patent.origin"></el-input>
          </el-form-item>
          <el-form-item label="购买时间" prop="buyDate">
            <el-date-picker type="date" v-model="patent.buyDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="生产哪类产品" prop="useTarget">
            <el-input v-model="patent.useTarget"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="patent.remarks"></el-input>
          </el-form-item>
        </el-form>
      </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '../../../common/dialog-ext/dialog-ext';
  export default {
    data() {
      return {
        form: {
          equimentName: '',
          spec: '',
          count: '',
          origin: '',
          buyDate: '',
          useTarget: '',
          capacitydaily: '',
          remarks: ''
        },
        patent: {
          equimentName: '',
          spec: '',
          count: '',
          origin: '',
          buyDate: '',
          useTarget: '',
          remarks: ''
        },
        formShow: false,
        patentShow: false,
        productList: [],
        patentList: [],
        isError: false,
        isError2: false
      }
    },
    components: {
      DialogExt
    },
    created() {},
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      initData(vendorId) {
        let _this = this;
        this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/equiment/query/' + vendorId + '/1').then(
          (res) => {
            if (res.data.resultMap.equiment instanceof Array && res.data.resultMap.equiment.length > 0) {
              _this.productList = [];
              res.data.resultMap.equiment.forEach((item) => {
                let tempData = {};
                for (let key in _this.form) {
                  if (item[key]) {
                    tempData[key] = item[key];
                  }
                }
                _this.productList.push(tempData);
              });
            }
          });

        this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/equiment/query/' + vendorId + '/0').then(
          (res) => {
            if (res.data.resultMap.equiment instanceof Array && res.data.resultMap.equiment.length > 0) {
              _this.patentList = [];
              res.data.resultMap.equiment.forEach((item) => {
                let tempData = {};
                for (let key in _this.patent) {
                  if (item[key]) {
                    tempData[key] = item[key];
                  }
                }
                _this.patentList.push(tempData);
              });
            }
          });
      },
      deleteProduct(index) {
        this.productList.splice(index, 1);
        this.checkList(1);
      },
      submitForm(callBack) {
        this.productList.push(JSON.parse(JSON.stringify(this.form)));
        this.resetForm('ruleForm');
        this.checkList(1);
        callBack(true);
      },
      submitPatent(callBack) {
        this.patentList.push(JSON.parse(JSON.stringify(this.patent)));
        this.resetForm('patentForm');
        this.checkList(2);
        callBack(true);
      },
      resetForm(ref) {
        if (this.$refs[ref])
          this.$refs[ref].resetFields();
      },
      deletePatent(index) {
        this.patentList.splice(index, 1);
        this.checkList(2);
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          resolve({
            data: {
              createEquimentJsonStr: JSON.stringify(this.productList),
              checkEquimentJsonStr: JSON.stringify(this.patentList)
            },
            check: isCheck ? this.checkList() : true
          });
        });
      },
      checkList(n) {
        let flag = true;
        if ((n === 1 || !n) && this.productList.length === 0) {
          this.isError = true;
          flag = false;
        } else {
          this.isError = false;
        }
        if ((n === 2 || !n) && this.patentList.length === 0) {
          this.isError2 = true;
          flag = false;
        } else {
          this.isError2 = false;
        }
        return flag;
      }
    }
  }

</script>
